<template>
	<view
	class="com-popup y-flex"
	:class="{'y-justify-center': direction == 'center', 'y-align-center': direction == 'center'}"
	:style="{position: position, visibility: isShow ? 'visible' : 'hidden'}">
		<view class="com-popup-mask y-flex" :style="maskStyle" @tap="handleMaskClick" v-if="maskShow" @touchmove.stop.prevent></view>
		<view class="com-popup-content y-flex" :style="popupStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			direction: {
				type: String,
				default: 'bottom'
			},
			duration : {
				type: Number,
				default: 300
			},
			//是否显示，支持.sync
			visible: {
				type: Boolean,
				default: false
			},
			//弹出层定位模式fixed | absolute
			position: {
				type: String,
				default: 'fixed'
			},
			//遮罩层颜色
			maskColor: {
				type: String,
				default: 'rgba(0,0,0,.5)'
			},
			//显示遮罩层
			maskShow: {
				type: Boolean,
				default: true
			},
			//开启遮罩层点击关闭
			enableMaskClickHide: {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
				visibleSync: false,
				isShow: false,
				maskClass: '',
				popupClass: '',
				windowWidth: 0,
				windowHeight: 0
			}
		},
		computed: {
			maskStyle () {
				return {
					'opacity': this.visibleSync ? 1 : 0,
					'background-color': this.maskColor,
					'transition-duration': this.duration + 'ms'
				}
			},
			popupStyle () {
				const styles = this.direction == 'top' ? {
					position: 'absolute',
					top: 0,
					left: 0,
					right: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateY(' + (this.visibleSync ? 0 : -this.windowHeight)  + 'px)'
				} : this.direction == 'left' ? {
					position: 'absolute',
					bottom: 0,
					left: 0,
					top: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateX(' + (this.visibleSync ? 0 : -this.windowWidth) + 'px)'
				} : this.direction == 'right' ? {
					position: 'absolute',
					bottom: 0,
					right: 0,
					top: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateX(' + (this.visibleSync ? 0 : this.windowWidth) + 'px)'
				} : this.direction == 'center' ? {
					opacity: this.visibleSync ? 1 : 0,
					transform: this.visibleSync ? 'scale(1)' : 'scale(0)'
				} : {
					position: 'absolute',
					bottom: 0,
					left: 0,
					right: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateY(' + (this.visibleSync ? 0 : this.windowHeight) + 'px)'
				}
				return Object.assign({}, styles, {
					'transition-duration': this.duration + 'ms'
				})
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth
					this.windowHeight = res.windowHeight
				}
			})
		},
		mounted () {
			this.visibleSync = this.visible
		},
		methods: {
			show () {
				this.isShow = true
				this.$emit('show')
				this.$emit('update:visible', true)
			},
			hide () {
				setTimeout(() => {
					this.$emit('hide')
					this.$emit('update:visible', false)
					this.isShow = false
				}, this.duration)
			},
			handleMaskClick () {
				if ( this.enableMaskClickHide ) this.visibleSync = false
			}
		},
		watch: {
			visible (newVal) {
				this.visibleSync = newVal
			},
			visibleSync (newVal) {
				if ( newVal ) this.show()
				else { this.hide() }
			}
		}
	}
</script>

<style scoped>
	.com-popup {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		pointer-events: none;
		z-index: 9;
		/* #endif */
	}
	.com-popup-content {
		/* #ifndef APP-NVUE */
		pointer-events: auto;
		/* #endif */
		opacity: 0;
		transition-property: transform, opacity;
	}
	.com-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		/* #ifndef APP-NVUE */
		pointer-events: auto;
		/* #endif */
		transition-property: opacity;
	}
</style>
